<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: cyan;
        border-radius: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <script>
      var boxEle = document.querySelector(".box");
      var direction = "left"; //34行
      //
      setInterval(function () {
        //设置计时器,计时器里面设置需要改变的变量
        var num = parseInt(getComputedStyle(boxEle)[direction]); //这里要获取到box 的 left值
        num += 1 * n; // 本来写+=1即可   后面需要控制方向  来用n控制方向  n的正负代表着移动数据的正负
        boxEle.style[direction] = num + "px"; //boxEle.style.left = num + "px"  这里left需要被改变去控制方向 就是通过switch 能该改变是left 还是top  所以把默认的left 设置成一个变量 direction
      }, 1); //设置1 会移动的更丝滑

      document.onkeydown = function (e) {
        //当浏览器接受到键盘按下的命令时
        var key = e.key; //声明一个key 等于 函数里面e的key方法
        // console.log(key);
        switch (key) {
          //switch  接收我们的键盘命令key值
          case "ArrowLeft": //当接收到Left时,改掉默认的方向为left,往左走就是负值,33行n为-1即可影响正负不影响数值
            direction = "left";
            n = -1;
            break;
          case "ArrowUp": //当接收到Up时,改掉默认的方向为Top,往上走就是负值,33行n为-1即可影响正负不影响数值
            direction = "top";
            n = -1;
            break;
          case "ArrowRight": //当接收到Right时,改掉默认的方向为Right,往右走就是正,33行n为1即可影响正负不影响数值
            n = 1;
            direction = "left";
            break;
          case "ArrowDown": //当接收到Down时,改掉默认的方向为Down,往下走就是正,33行n为1即可影响正负不影响数值
            n = 1;
            direction = "top";
            break;
        }
      };
    </script>
  </body>
</html>
